import styles from './index.module.less'
import xpic from '../../icons/x.png'
export default ()=> {
  
  return (
    <div>
      <span className={styles.zfont}>CSSPoint</span>
      <div >
        <div className={styles.effect_textAlign} >
          <div>test</div>
          <span>hello</span>
          <a href='https://blog.csdn.net/qq_44960253/article/details/106972959'>解决decoration问题，inlineblock</a>
          <input type='text'></input>
        </div>
      </div>
      <div style={{margin: '0 auto',width: '100px'}}>
        margin：0 auto 一般针对于固定宽度的盒子
      </div>
      <div style={{lineHeight:'1'}}>line-height : 1 可以取消上下间距 ;;;lineheight lineheight lineheight lineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheightlineheight</div>
      <div style={{backgroundColor:'pink',height:'50px',lineHeight:'50px'}}>light 居中</div>
      <div>样式前有三角符号：样式报错</div>
      <div>背景颜色属性的属性值默认是 透明：rgba(0,0,0,0)、transparent</div>

      <div className={styles.bg_img}>
      </div>
      <div style={{textDecorationLine:'none',fontSize:'12px'}}>chrome 调试：灰色代表不能继承，高亮代表可以继承 <div>hello</div> </div>
      <div>下面就是子元素的调试：Decoration不能继承父类</div>
      <img src={xpic}  />
      <div>优先级，行内，id，class，标签</div>
      <div>border-box:设置的宽高就是真实的宽高，内容自动内减</div>

      <div>下面是塌陷问题:记住父子塌陷问题，得设置父的触发bfc</div>
      <div className={styles.bfc}>
        <div className={styles.wrapper}>
          <div className={styles.top}></div>
          <div className={styles.bottom}></div>
        </div>
      </div>

      <div>清除浮动：最后一个元素block，然后clear:both
        <div>创建BFC方法(清除浮动，解决塌陷)： 1. html标签是BFC盒子 2. 浮动元素是BFC盒子 3. 行内块元素是BFC盒子 4. overflow属性取值不为visible。如：auto、hidden…</div>
      </div>
      <div className={styles.clearfix} >
        <div style={{float: 'left',width:'100px',height: '100px',backgroundColor: 'red'}}></div>
      </div>
      <div>定位：为了解决层叠问题，绝对定位默认相当于浏览器</div>
      <div>
        vercila aligin

        1. 文本框和表单按钮无法对齐问题 2. input和img无法对齐问题 3. div中的文本框，文本框无法贴顶问题 4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题 5. 使用line-height让img标签垂直居中问题
      </div>
      
      <div style={{width:'150px',height:'50px',borderRadius:'25px',backgroundColor:'red',textAlign:'center',lineHeight:'50px'}}>helo</div>
      <div className={styles.sj}></div>
      
    </div>
  )
}